<!--
 * @Author: your name
 * @Date: 2021-11-28 18:46:45
 * @LastEditTime: 2021-12-02 10:44:53
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\client\src\components\Recommend.vue
-->
<template>
  <div class="recommend">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ title }}</span>
      </div>
      <div
        v-for="item in data"
        :key="item.id"
        class="article-item-box"
        @click="handlerClick(item.id)"
      >
        {{ `${item.title} · 大约 ${item.release_time}` | ellipsis }}
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "推荐阅读",
      require: false,
    },
    data: {
      type: Array,
      default: null,
      require: true,
    },
    handlerClick: {
      type: Function, //参数类型
      default: null, //默认值
      require: false, //是否必须有
    },
  },

  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 18) {
        return value.slice(0, 18) + "...";
      }
      return value;
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/common/common.scss";
.box-card {
  margin-bottom: 20px;
  @include background_color("card_background");
  @include font_color("text-color");
  border: none;
}
.article-item-box {
  font-size: 14px;
  margin-bottom: 15px;
  cursor: pointer;
}
.article-item-box:hover {
  color: #ff0064;
}
.clearfix {
  font-size: 14px;
  font-weight: bold;
  @include font_color("text-color");
}
</style>
